<template>
  <div id="recipe">
    <div class="top">
      <input type="text" name="" value="" placeholder="搜索菜谱、食材" />
    </div>
    <div class="navv">
      <span class="a1">精选</span>
      <span class="a2">家常菜</span>
      <span class="a3">卡路里</span>
      <span class="a4">全部</span>
    </div>
    <div class="main">
      <ul>
        <li class="main-wrapper">
          <img class="imgs1" src="@/assets/菜谱img/图片.png" alt="" />
          <span>麻辣香锅</span>
          <p>底料、香菜、丸子、鲜虾、千页豆腐...</p>
          <i>19.9W</i>
          <img class="imgs2" src="@/assets/菜谱img/浏览量@2x.png" alt="" />
          <img class="imgs3" src="@/assets/菜谱img/123.png" alt="" />
        </li>
        <li class="main-wrapper">
          <img class="imgs1" src="@/assets/菜谱img/hmj.png" alt="" />
          <span>黄焖鸡米饭</span>
          <p>大米、鸡腿肉、青椒、金针菇...</p>
          <i>29.9W</i>
          <img class="imgs2" src="@/assets/菜谱img/浏览量@2x.png" alt="" />
          <img class="imgs3" src="@/assets/菜谱img/345.png" alt="" />
        </li>
        <li class="main-wrapper">
          <img class="imgs1" src="@/assets/菜谱img/zyxwz.png" alt="" />
          <span>章鱼小丸子</span>
          <p>肉松、章鱼、海苔...</p>
          <i>9.9W</i>
          <img class="imgs2" src="@/assets/菜谱img/浏览量@2x.png" alt="" />
          <img class="imgs3" src="@/assets/菜谱img/345.png" alt="" />
        </li>
        <li class="main-wrapper">
          <img class="imgs1" src="@/assets/菜谱img/ps.png" alt="" />
          <span>披萨</span>
          <p>芝士、火腿、鸡肉、青椒...</p>
          <i>33.9W</i>
          <img class="imgs2" src="@/assets/菜谱img/浏览量@2x.png" alt="" />
          <img class="imgs3" src="@/assets/菜谱img/345.png" alt="" />
        </li>
        <li class="main-wrapper">
          <img class="imgs1" src="@/assets/菜谱img/mian.png" alt="" />
          <span>意大利面</span>
          <p>面、青椒...</p>
          <i>9.9K</i>
          <img class="imgs2" src="@/assets/菜谱img/浏览量@2x.png" alt="" />
          <img class="imgs3" src="@/assets/菜谱img/345.png" alt="" />
        </li>
      </ul>
    </div>
    <footer-tabbar></footer-tabbar>
  </div>
</template>

<script>
import FooterTabbar from "../../components/footer-tabbar.vue";
export default {
  name: "Recipe",
  data() {
    return {
      list: [],
    };
  },
  components: {
    FooterTabbar,
  },
};
</script>

<style lang="less" scoped>
.top {
  position: fixed;
  height: 115px;
  width: 100%;
  background: #ffcc00;
  padding: 14px 21px 14px 19px;
}
input {
  font-size: 24px;
  font-weight: 400;
  width: 788px;
  height: 60px;
  text-align: center;
  border-radius: 30px;
  background: #ffffff;
  border: none;
}
input::-webkit-input-placeholder {
  color: #dfdfdf;
}
.navv {
  z-index: 999;
  height: 85px;
  width: 100%;
  position: fixed;
  top: 116px;
  font-size: 28px;
  font-weight: 400;
  color: #727272;
  padding-left: 30px;
  line-height: 85px;
  background: #fff;
}
.a1 {
  color: #fbd76a;
}
.navv span {
  margin-right: 40px;
}
.navv .a4 {
  margin-left: 325px;
}
.main {
  height: 1260px;
  width: 100%;
  position: fixed;
  top: 204px;
  left: 0;
  overflow: auto;
}
.main > ul {
  height: 1415px;
  width: 100%;
}
.main > ul > li {
  height: 263px;
  width: 788px;
  margin: 0 auto;
  border-top: 1px solid #cac9c9;
  padding: 37px 35px 0px 36px;
  position: relative;
}
.main > ul > li > .imgs1 {
  width: 252px;
  height: 189px;
  position: absolute;
  left: 0;
}
.main > ul > li > .imgs2 {
  width: 24px;
  height: 15px;
  position: absolute;
  right: 41px;
  top: 78px;
}
.main > ul > li > .imgs3 {
  width: 29px;
  height: 28px;
  position: absolute;
  right: 41px;
  top: 170px;
}
.main > ul > li > span {
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #111111;
  position: absolute;
  top: 72px;
  left: 300px;
}
.main > ul > li > p {
  height: 22px;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #727272;
  position: absolute;
  top: 144px;
  left: 300px;
}
.main > ul > li > i {
  position: absolute;
  right: 74px;
  top: 72px;
  width: 68px;
  height: 16px;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #646464;
}
</style>
